<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <div class="detail-column">
        <div class="column-title">账号信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '150px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="姓名">{{
              datas?.real_name
            }}</a-descriptions-item>
            <a-descriptions-item label="账号">
              {{ datas?.login_name }}
            </a-descriptions-item>
            <a-descriptions-item label="账号创建日期">{{
              datas?.create_time ?? "-"
            }}</a-descriptions-item>
            <a-descriptions-item label="绑定手机">{{
              datas?.mobile ?? "-"
            }}</a-descriptions-item>
            <a-descriptions-item label="启用状态">{{
              datas?.enabled == null ? "-" : datas?.enabled ? "启用" : "禁用"
            }}</a-descriptions-item>
            <a-descriptions-item label="电子邮箱">{{
              datas?.mobile ?? "-"
            }}</a-descriptions-item>
            <a-descriptions-item label="备注">{{
              datas?.remark ?? ""
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>

      <!-- 经销商列表 -->
      <div
        class="detail-column"
        v-if="datas?.dealer_users && datas.dealer_users.length > 0"
      >
        <div class="column-title">关联经销商</div>
        <div class="column-content">
          <a-table
            :columns="dealerColumns"
            :data-source="datas.dealer_users"
            :pagination="false"
            size="small"
            bordered
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'dealer_name'">
                {{ record.dealer?.name || "-" }}
              </template>
              <template v-else-if="column.key === 'dealer_no'">
                {{ record.dealer?.no || "-" }}
              </template>
              <template v-else-if="column.key === 'dealer_address'">
                {{ record.dealer?.address || "-" }}
              </template>
              <template v-else-if="column.key === 'dealer_enabled'">
                <a-tag :color="record.dealer?.enabled ? 'green' : 'red'">
                  {{ record.dealer?.enabled ? "启用" : "禁用" }}
                </a-tag>
              </template>
              <template v-else-if="column.key === 'created'">
                {{
                  record.created
                    ? new Date(record.created).toLocaleDateString()
                    : "-"
                }}
              </template>
              <template v-else-if="column.key === 'action'">
                <a-button
                  type="link"
                  danger
                  size="small"
                  @click="handleDelete(record)"
                >
                  删除
                </a-button>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </div>

    <!-- 删除确认对话框 -->
    <a-modal
      v-model:open="deleteModalVisible"
      title="删除确认"
      @ok="confirmDelete"
      @cancel="cancelDelete"
    >
      <div class="delete-dialog">
        <div class="title">确定要删除该经销商关联吗？</div>
        <div class="content">
          <div class="item">
            经销商：{{ currentDeleteRecord?.dealer?.name || "-" }}
          </div>
          <div class="item">
            编号：{{ currentDeleteRecord?.dealer?.no || "-" }}
          </div>
        </div>
        <div class="warning">该操作不可逆，请谨慎操作！</div>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import api from "@/api";
import API from "@/api/administrator";
import { message } from "ant-design-vue";
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const query = computed(() => route.query);
const datas = ref();

// 删除相关状态
const deleteModalVisible = ref(false);
const currentDeleteRecord = ref(null);

// 经销商表格列定义
const dealerColumns = [
  {
    title: "经销商名称",
    key: "dealer_name",
    width: 150,
  },
  {
    title: "编号",
    key: "dealer_no",
    width: 120,
  },
  {
    title: "地址",
    key: "dealer_address",
    width: 200,
  },
  {
    title: "状态",
    key: "dealer_enabled",
    width: 80,
  },
  {
    title: "关联时间",
    key: "created",
    width: 120,
  },
  {
    title: "备注",
    key: "remark",
    width: 150,
  },
  {
    title: "操作",
    key: "action",
    width: 80,
  },
];

const getData = async () => {
  let params = {
    user_id: query.value.id,
  };
  const res = await API.UserFetchModel(params);
  datas.value = res;
};

// 删除经销商用户关系
const handleDelete = (record) => {
  currentDeleteRecord.value = record;
  deleteModalVisible.value = true;
};

const confirmDelete = async () => {
  try {
    const res = await api.apiDealerUserDeletePost({
      dealer_id: currentDeleteRecord.value.dealer_id,
      user_id: currentDeleteRecord.value.user_id,
    });

    if (res) {
      message.success("删除成功");
      // 重新加载数据
      await getData();
    } else {
      message.error("删除失败");
    }
  } catch (error) {
    console.error("删除失败:", error);
    message.error("删除失败");
  } finally {
    deleteModalVisible.value = false;
    currentDeleteRecord.value = null;
  }
};

const cancelDelete = () => {
  deleteModalVisible.value = false;
  currentDeleteRecord.value = null;
};

onMounted(() => {
  getData();
});
</script>

<style lang="less" scoped>
.delete-dialog {
  .title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #333;
  }

  .content {
    margin-bottom: 16px;

    .item {
      margin-bottom: 8px;
      color: #666;
    }
  }

  .warning {
    color: #ff4d4f;
    font-size: 14px;
    font-weight: 500;
  }
}
</style>
